<template>
  <div class="main">
    <div class="container">
      <ul class="box">
        <li v-for="(item,index) in arr" :key="index">
          <img
            class="child1"
            :src="'http://localhost:8080/upload/find_img?img_url=' + item.imgurl"
            alt
          />
          <img
            class="child2"
            :src="'http://localhost:8080/upload/find_img?img_url=' + item.img2url"
            alt
          />
        </li>
      </ul>
     
    </div>
    <div class="dibu" @click="tosign">
      
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img2url: "",
      imgurl: "",
      arr: []
    };
  },
  name: "HelloWorld",

  methods: {
    tosign() {
      this.$router.push("/");
    }
  },
  created() {
    let that = this;
    var parameter = {
      createtime: "string",
      id: 0,
      img2url: "string",
      imgurl: "string"
    };
    $.ajax({
      type: "POST",
      url: "http://localhost:8080/upload/find",
      contentType: "application/json",
      data: JSON.stringify(parameter),

      success: function(data) {
        console.log(data);
        that.arr = data;
      }
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}
* {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../assets/images/back.png) no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.container{
  width: 12rem;
  height: 7.5rem;
  margin-top: 1rem;
  /* background: yellowgreen; */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.container .box{
    width: 12.4rem;
  height: 7.5rem;
/* background: blueviolet; */
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
}
.container .box li {
  float: left;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.6rem;
  position: relative;
  /* background: blue; */
}
.container .box .child1 {
  border-radius: 5%;
  position: absolute;
  width: 2rem;
  height: 2rem;
}

.container .box .child2 {
  width: 1rem;
  height: 1rem;
  position: absolute;
  margin-top: 1rem;
  margin-left: 0.5rem;
}
.dibu {
  margin-top: 0.2rem;
  width: 2rem;
  height: 0.8rem;
  background: url(../assets/images/fanhui.png) no-repeat;
  background-size: 100% 100%;
 
}


</style>




